연산 결과 또는 사용자의 작업 결과를 나타낸다.
구문 콘텐츠(phrasing-content)가 예상되는 위치
[Exposed=Window]
interface HTMLOutputElement : HTMLElement {
[HTMLConstructor] constructor();
[SameObject, PutForwards=value] readonly attribute DOMTokenList htmlFor;
readonly attribute HTMLFormElement? form;
[CEReactions] attribute DOMString name;
readonly attribute DOMString type;
[CEReactions] attribute DOMString defaultValue;
[CEReactions] attribute DOMString value;
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
boolean reportValidity();
undefined setCustomValidity(DOMString error);
readonly attribute NodeList labels;
};일반 요소에 결과를 출력하는 것과 차별점을 갖지 못하는 것 처럼 보이지만 <output> 요소는 양식(form) 요소이며 name 애트리뷰트와 value IDL(Interface Description Language) 속성을 포함한다.
다음은 값을 표시하는 데 일반 요소와 차이점을 설명한다.
const elDiv = document.querySelector("div.output");
const elOutput = document.querySelector("output");
elDiv.textContent = "what value";
elOutput.value = "what value";<output></output>
결과에 영향을 주었던 값을 갖는 요소의 id를 순서와 관계없이 공백으로 구분된 목록으로 지정한다. 영향을 준 요소와 명시적 관계임을 의미하지만 출력에 어떠한 영향을 주지는 않는다.
순서가 없는 공백으로 구분된 고유한 토큰 세트를 나타낸다.
<form> 요소와 연결할 때 연결하고자 하는 <form> 요소의 id를 지정한다.
문서에서 요소를 식별하는 유일무이한 문자열 값을 나타낸다.
요소의 이름을 지정한다. 유저 에이전트(user agent)에서 식별값으로 사용되며 입력 요소에 지정된 name의 값은 서버에 전송시 데이터를 식별하는 이름으로 사용된다. 식별값으로 사용되지만 유일무이한 값으로 강제하지는 않는다. 그러한 이유는 <input type="checkbox"> 요소를 통해 이해할 수 있다. 체크박스 입력 방식은 준비된 동일한 이름의 데이터에서 다른 값을 선택하는 식이다. 따라서 값은 달라도 데이터의 이름은 동일할 수 있다.
<form> 요소에서 name 애트리뷰트가 HTML5에서 폐기되었다. 대신에 id 애트리뷰트를 식별값으로 사용한다.비워있지 않는 문자열을 나타낸다.
일부 글로벌 애트리뷰트는 이 요소에서 사용되지 않을 수 있다.
일부 글로벌 이벤트 핸들러는 이 요소에서 사용되지 않을 수 있다. 이벤트 등록은 자바스크립트 사용을 권장한다.